<template>
  <!-- 空调控制 -->
  <div class="ktkz-popup">
    <div class="item">
      <div class="title blueTitleStyle">开机</div>
      <div class="content centerbox">
        <el-select v-model="onoff" placeholder="请选择">
          <el-option
            v-for="item in onoff_options"
            :key="item.value"
            :label="item.name"
            :value="item.code"
          ></el-option>
        </el-select>
        <div class="btn">
          <el-button type="primary" @click="sendPointerCommand('开机')">下发</el-button>
        </div>
      </div>
    </div>
    <div class="item">
      <div class="title blueTitleStyle">关机</div>
      <div class="content centerbox">
        <el-input v-model="offpoint" disabled></el-input>
        <div class="btn">
          <el-button type="primary" @click="sendPointerCommand('关机')">下发</el-button>
        </div>
      </div>
    </div>
    <!-- <div class="item">
      <div class="title blueTitleStyle">风速</div>
      <div class="content centerbox">
        <el-select v-model="cloudspeed" placeholder="请选择">
          <el-option
            v-for="item in cloudspeed_options"
            :key="item.value"
            :label="item.name"
            :value="item.code"
          ></el-option>
        </el-select>
        <div class="btn">
          <el-button type="primary" @click="sendPointerCommand('风速')">下发</el-button>
        </div>
      </div>
    </div>-->
    <!-- <div class="item">
      <div class="title blueTitleStyle">控制模式</div>
      <div class="content centerbox">
        <el-select v-model="control" placeholder="请选择">
          <el-option
            v-for="item in control_options"
            :key="item.value"
            :label="item.name"
            :value="item.code"
          ></el-option>
        </el-select>
        <div class="btn">
          <el-button type="primary" @click="sendPointerCommand('控制模式')">下发</el-button>
        </div>
      </div>
    </div>-->
    <div class="item">
      <div class="title blueTitleStyle">温度设置</div>
      <div class="content centerbox">
        <!-- <el-input-number v-model="weather" placeholder="请输入温度" :min="18" :max="32"></el-input-number> -->
       <div class="kz">
         <div @click="sendPointerCommand('温度设置-')">-</div>
         <div>-</div>
         <div @click="sendPointerCommand('温度设置+')">+</div>
       </div>
        <!-- <div class="btn">
          <el-button type="primary" @click="sendPointerCommand('温度设置')">下发</el-button>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Watch, Vue, Prop } from "vue-property-decorator";
import { objType } from "@/utils/interface";
import { publicAPIModule } from "@/store/modules/public";

@Component
export default class extends Vue {
  @Prop() list;
  onoff: string = "";
  cloudspeed: string = "";
  control: string = "";
  weather: string = "";
  offpoint: string = "关机";
  onoff_options = [
    {
      name: "制冷",
      code: "040711",
    },
    {
      name: "制热",
      code: "040710",
    },
  ];
  cloudspeed_options = [
    {
      name: "低速",
      code: "1",
    },
    {
      name: "中速",
      code: "2",
    },
    {
      name: "高速",
      code: "3",
    },
  ];
  control_options = [
    {
      name: "通风",
      code: "0",
    },
    {
      name: "制热",
      code: "16",
    },
    {
      name: "制冷",
      code: "32",
    },
    {
      name: "除湿",
      code: "48",
    },
  ];
  mounted() {
    console.log("this.list:", this.list);
  }

  //点位指令下发/远程控制
  sendPointerCommand(val) {
    console.log("this.list:", this.list);
    let type = "";
    var command = "";
    // "040711"
    if (val === "开机") {
      if (!this.onoff) {
        this.$message({
          type: "warning",
          message: "请选择下发内容",
        });
        return;
      }
      command = "1";
      type = this.onoff;
      // "040750"
    } else if (val === "关机") {
      command = "1";
      type = "040750";
      // "040709"
    } else if (val === "温度设置-") {
      // command = this.weather;
      command='2'
      type = "040709";
    }else if (val === "温度设置+") {
      // command = this.weather;
      command='1'
      type = "040709";
    }
    var params = {
      command: command,
      pointerId: this.list.control.filter((o) => o.type == type)[0].id,
    };
    
    (this as any).$services
      .sendPointerCommand({ data: params, method: "post",postparams:true })
      .then((res: any) => {
        console.log(res.data);
        if (res.data) {
          this.$message({
            type: "success",
            message: res.message,
          });
        } else {
          this.$message({
            type: "info",
            message: res.message,
          });
        }
      })
      .catch((err: any) => {
        console.log(err);
        this.$message({
          type: "info",
          message: err.message,
        });
      });
  }
}
</script>

<style lang="scss" scoped>
.ktkz-popup {
  width: 100%;
  height: 4.2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  box-sizing: border-box;
  padding: 0.3rem 0.8rem;
  .item {
    width: 2.62rem;
    height: 1.4rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-sizing: border-box;
    margin: 0.2rem auto;
    align-items: center;

    .title {
      height: 0.3rem;
    }
    .content {
      width: 100%;
      height: 1.1rem;
      padding: 0 0.1rem;
      box-sizing: border-box;
      .kz{
        width: 1.2rem;
        display: flex;
        height: 0.36rem;
        >div{
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        >div:nth-child(1),>div:nth-child(3){
          background-color: #999;
          font-size: 0.2rem;
          cursor: pointer;
        }
        >div:nth-child(1):hover,>div:nth-child(3):hover{
          background-color: #666;
          font-size: 0.2rem;
        }
        >div:nth-child(1):active,>div:nth-child(3):active{
          background-color: #333;
          font-size: 0.2rem;
        }
      }
      .btn {
        width: 0.9rem;
        margin-left: 0.1rem;
      }
    }
  }
}
</style>
<style lang="scss">
// .ktkz-popup {
//   // .el-input__inner {
//   //   width: 1rem;
//   // }
//   // .el-input-number .el-input__inner{
//   //   width: 0.6rem;
//   // }
// }
</style>
